$(function () {
  //1.验证码 使用修改路径 GET请求,路径解析
  //1.1 定义变量获取图片标签,定义id
  let $img = $(".form-item .captcha-graph-img img");  // 获取图像标签
  let sImageCodeId = "";  // 定义图像验证码ID值

  //1.2.1 打开网页自触发一次
  generateImageCode();  // 生成图像验证码图片
  //1.2.2 选取触发条件(点击触发)
  $img.click(generateImageCode);  // 点击图片验证码生成新的图片验证码图片

  //1.3 触发函数 (生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性)
  function generateImageCode() {
    // 1.3.1 生成一个图片验证码随机编号(由于是调用其他作者编写的函数,所以放在外面引用)
    sImageCodeId = generateUUID();
    // 1.3.2 拼接请求url /image_codes/<uuid:image_code_id>/
    let imageCodeUrl = "/image_codes/" + sImageCodeId + "/";
    // 1.3.3修改验证码图片src地址
    $img.attr('src', imageCodeUrl)
  }

  //1.3.1 生成uuid验证码
  function generateUUID() {
    let d = new Date().getTime();
    if (window.performance && typeof window.performance.now === "function") {
        d += performance.now(); //use high-precision timer if available
    }
    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
  }

  //2.校验用户名是否存在
  //2.1 定义变量获取user_name输入栏对象
  let $username = $('#user_name');
   //2.2 选取触发条件(光标移出触发)
  $username.blur(fn_check_usrname);

   //2.3 用户名验证逻辑判断用户名是否已经注册
  function fn_check_usrname() {
    //2.3.1 获取用户输入字符串
    let sUsername = $username.val();
    let SreturnValue = "";//用于接收反回结果
    //2.3.2 第一次校验 如果输入为空直接反回
    if (sUsername === "") {
      message.showError('用户名不能为空！');
      return
    }
    //2.3.3 第二次校验 如果不符合规则反回
    if (!(/^\w{5,20}$/).test(sUsername)) {
      message.showError('请输入5-20个字符的用户名');
      return
    }
    //2.3.4 前端校验完毕后通过ajax发送至后端校验
    //2.3.4.1 发起ajax请求
    $.ajax({ // 编辑请求信息
      url: '/usernames/' + sUsername + '/',
      type: 'GET',
      dataType: 'json',
      async:false
    })
    //2.3.4.2 ajax请求成功 接收后端反回的结果
      .done(function (res) { //res为结果
        if (res.data.count !== 0) {
          message.showError(res.data.username + '已注册，请重新输入！');
          SreturnValue = "";
        } else {
          message.showInfo(res.data.username + '能正常使用！');
          SreturnValue = "success";
          console.log(SreturnValue)
        }
      })
      //2.3.4.3 ajax请求失败
      .fail(function () {
        message.showError('服务器超时，请重试！');
        SreturnValue = "";
      });
    return SreturnValue
  }

  //3. 校验手机号是否存在
  //3.1 定义变量获取 mobile 输入栏对象
  let $mobile = $('#mobile');
   //3.2 选取触发条件(光标移出触发)
  $mobile.blur(fn_check_mobile);

   //3.3 用户名验证逻辑判断 mobile 是否已经注册
  function fn_check_mobile() {
    //3.3.1 获取用户输入字符串
    let sMobile = $mobile.val();
    let SreturnValue = "";//用于接收反回结果
    //3.3.2 第一次校验 如果输入为空直接反回
    if (sMobile === "") {
      message.showError('手机号不能为空！');
      return
    }
    //3.3.3 第二次校验 如果不符合规则反回
    if (!(/^1[3456789]\d{9}$/).test(sMobile)) {
      message.showError('手机号不正确');
      return
    }
    //3.3.4 前端校验完毕后通过ajax发送至后端校验
    //3.3.4.1 发起ajax请求
    $.ajax({ // 编辑请求信息
      url: '/mobiles/' + sMobile + '/',
      type: 'GET',
      dataType: 'json',
      async: false	// 把async关掉 如果不关则上面return无效,继续请求
    })
    //3.3.4.2 ajax请求成功 接收后端反回的结果
      .done(function (res) { //res为结果
        if (res.data.count !== 0) {
          message.showError(res.data.mobile + '已注册，请重新输入！');
          SreturnValue = ""
        } else {
          message.showInfo(res.data.mobile + '能正常使用！');
          SreturnValue = "success"
        }
      })
      //3.3.4.3 ajax请求失败
      .fail(function () {
        message.showError('服务器超时，请重试！');
        SreturnValue = ""
      });
    return SreturnValue
  }

  // 4、发送短信逻辑
  let $smsCodeBtn = $('.form-item .sms-captcha');  // 获取短信验证码按钮元素，需要定义一个id为input_smscode
  let $imgCodeText = $('#input_captcha');  // 获取用户输入的图片验证码元素，需要定义一个id为input_captcha
  $smsCodeBtn.click(function () {
    // 判断手机号是否输入
    if (fn_check_mobile() !== "success") {
      return
    }

    // 判断用户是否输入图片验证码
    let text = $imgCodeText.val();  // 获取用户输入的图片验证码文本
    if (!text) {
        message.showError('请填写验证码！');
        return
    }

    // 判断是否生成的UUID
    if (!sImageCodeId) {
      message.showError('图片UUID为空');
      return
    }
    // 正常获取参数
    let SdataParams = {
      "mobile": $mobile.val(),   // 获取用户输入的手机号
      "text": text,  // 获取用户输入的图片验证码文本
      "image_code_id": sImageCodeId  // 获取图片UUID
    };
    // 向后端发送请求
    $.ajax({
      // 请求地址
      url: "/sms_codes/",
      // 请求方式
      type: "POST",
      data: JSON.stringify(SdataParams),
      // 请求内容的数据类型（前端发给后端的格式）
      contentType: "application/json; charset=utf-8",
      // 响应数据的格式（后端返回给前端的格式）
      dataType: "json",
      async: false	// 关掉异步功能 如果不关闭则上面的return无效
    })
    .done(function (res) {
        if (res.errno === "0") {
          // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
           message.showSuccess('短信验证码发送成功');
          let num = 60;
          // 设置一个计时器
          let t = setInterval(function () {
            if (num === 1) {
              // 如果计时器到最后, 清除计时器对象
              clearInterval(t);
              // 将点击获取验证码的按钮展示的文本恢复成原始文本
              $smsCodeBtn.html("获取验证码");
              // // 将点击按钮的onclick事件函数恢复回去
              // $(".get_code").attr("onclick", "sendSMSCode();");
            } else {
              num -= 1;
              // 展示倒计时信息
              $smsCodeBtn.html(num + "秒");
            }
          }, 1000);
        } else {
          message.showError(res.errmsg);
        }
      })
    .fail(function(){
        message.showError(res.errmsg);
      });
    });
 // get cookie using jQuery
  function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
      let cookies = document.cookie.split(';');
      for (let i = 0; i < cookies.length; i++) {
        let cookie = jQuery.trim(cookies[i]);
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) === (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

  function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));//除了这些,其他请求都需要加
  }

  // Setting the token on the AJAX request
  $.ajaxSetup({
    beforeSend: function (xhr, settings) {
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
      }
    }
  });

  //5.用户注册逻辑
  //5.1 获取对象
  let $register = $('.form-contain');  // 获取form表单
  //5.2 事件触发
   $register.submit(function (e) {    //
    e.preventDefault();// 阻止form表单默认提交操作

    // 获取用户输入的内容
    let sUsername = $username.val();  // 获取用户输入的用户名字符串
    let sPassword = $("input[name=password]").val();
    let sPasswordRepeat = $("input[name=password_repeat]").val();
    let sMobile = $mobile.val();  // 获取用户输入的手机号码字符串
    let sSmsCode = $("input[name=sms_captcha]").val();

    // 判断用户名是否已注册
    if (fn_check_usrname() !== "success") {
      return
    }

    // 判断手机号是否为空，是否已注册
    if (fn_check_mobile() !== "success") {
      return
    }

    // 判断用户输入的密码是否为空
    if ((!sPassword) || (!sPasswordRepeat)) {
      message.showError('密码或确认密码不能为空');
      return
    }

    // 判断用户输入的密码和确认密码长度是否为6-20位
    if ((sPassword.length < 6 || sPassword.length > 20) ||
      (sPasswordRepeat.length < 6 || sPasswordRepeat.length > 20)) {
      message.showError('密码和确认密码的长度需在6～20位以内');
      return
    }

    // 判断用户输入的密码和确认密码是否一致
    if (sPassword !== sPasswordRepeat) {
      message.showError('密码和确认密码不一致');
      return
    }

    // 判断用户输入的短信验证码是否为6位数字
    if (!(/^\d{6}$/).test(sSmsCode)) {
      message.showError('短信验证码格式不正确，必须为6位数字！');
      return
    }

    // 5.3发起注册请求
    // 5.3.1、创建请求参数
    let SdataParams = {
      "username": sUsername,
      "password": sPassword,
      "password_repeat": sPasswordRepeat,
      "mobile": sMobile,
      "sms_code": sSmsCode
    };

    // 5.3.2、创建ajax请求
    $.ajax({
      // 请求地址
      url: "/register/",  // url尾部需要添加/
      // 请求方式
      type: "POST",
      data: JSON.stringify(SdataParams),// 请求内容的数据类型（前端发给后端的格式）
      contentType: "application/json; charset=utf-8",// 响应数据的格式（后端返回给前端的格式）
      dataType: "json",
      async: false
    })
      .done(function (res) {
        if (res.errno === "0") {
          // 注册成功
          message.showSuccess('恭喜你，注册成功！');
          setTimeout(function () {
            // window.location.href = '/index/';// 注册成功之后重定向到主页
            window.location.herf = document.referrer;//反回跳转之前的页面
          }, 1000)
        } else {
          // 注册失败，打印错误信息
          message.showError(res.errmsg);
        }
      })
      .fail(function(){
        message.showError('服务器超时，请重试！');
      });

  });
});